<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=no"/>
<meta charset="UTF-8">
<title>区域统计</title>

<link rel="stylesheet" href="/css/vendor/common.css" type="text/css">
<link rel="stylesheet" type="text/css" href="/css/ecalendar.css">
<link href="/css/jquery.vector-map.css" media="screen" rel="stylesheet" type="text/css">
<link href="/css/vendor/common-grid.less" rel="stylesheet/less" type="text/css">
<link href="/css/vendor/zone-statistics.less" rel="stylesheet/less" type="text/css">

<script src="/js/less.min.js"></script>
</head>

<body>
<main>
	<div class="filter-wrap">
		<div class="title-bar">
			<label>过滤器</label>
			<img class="filter-toggle-icon button rotate-180" onClick="zoneStatisticsM.clickFilterToggle(this)">
		</div>
		
		<div id="drone-filter">
			<div class="container">
				<div class="row clearfix">
					<div class="col-md-4 col-sm-6 col-xs-12">
						<table>
							<tr><th>系统名称:</th><td><input type="text" value="JMIWUD"></td></tr>
							<tr><th>飞机类型:</th><td><select><option>F1000</option><option>F200</option></select></td></tr>
						</table>
					</div>
					<div class="col-md-4 col-sm-6 col-xs-12">
						<table>
							<tr><th>飞机编号:</th><td><input type="text" value="18138288888"></td></tr>
							<tr>
								<th>飞行时间:</th>
								<td><input data-attr="date" type="date-h" value="2017/8/23">-<input data-attr="date" type="date-h" class="end" value="2017/8/23"></td>
							</tr>
						</table>
					</div>
					<div class="col-md-4 col-sm-6 col-xs-12">
						<table>
							<tr><th>降落类型:</th><td><input type="text" value="18138288888"></td></tr>
							<tr>
								<td colspan="2">
									<div class="btn-0 button">重 置</div>
									<div class="btn-1 button">过 滤</div>
								</td>
							</tr>
						</table>
					</div>
				</div>
			</div> <!-- .container -->
		</div> 
	</div>
	
	<div id="data-wrap">
        <div class="drone-statistics-container">
            <div style="height: 15px; width: 100%;"></div>
            <table class="drone-cnt-wrap" cellpadding="0" cellspacing="0">
                <tr><td>
                    <canvas id="drone-cnt-canvas" width=170 height=170></canvas>
                    <ul>
                        <li><span class="num">0</span>&nbsp;架</li>
                        <li><span class="type">新增飞机</span></li>
                    </ul>
                </td></tr>
                <tr><td><span class="total">0</span>&nbsp;架飞机</td></tr>
            </table>
            <table class="info-table" cellpadding="0" cellspacing="0">
                <tr><td>
                    <div>
                        <span class="name">飞行里程</span>
                        <span class="value">
                            <span class="num">0</span>
                            <span class="sep"> / </span>
                            <span class="total">0</span>
                            <span class="sep">公里</span>
                        </span>
                    </div>
                    <canvas id="mileage-progress-canvas" width=270 height=10></canvas>	
                </td></tr>
                <tr><td>
                    <div>
                        <span class="name">飞行面积</span>
                        <span class="value">
                            <span class="num">0</span>
                            <span class="sep"> / </span>
                            <span class="total">0</span>
                            <span class="sep">平方公里</span>
                        </span>
                    </div>
                    <canvas id="area-progress-canvas" width=270 height=10></canvas>
                </td></tr>
                <tr><td>
                    <div>
                        <span class="name">飞行时长</span>
                        <span class="value">
                            <span class="num">0</span>
                            <span class="sep"> / </span>
                            <span class="total">0</span>
                            <span class="sep">小时</span>
                        </span>
                    </div>
                    <canvas id="duration-progress-canvas" width=270 height=10></canvas>
                </td></tr>
                <tr><td>
                    <div>
                        <span class="name">飞行架次</span>
                        <span class="value">
                            <span class="num">0</span>
                            <span class="sep"> / </span>
                            <span class="total">0</span>
                            <span class="sep">架次</span>
                        </span>
                    </div>
                    <canvas id="flight-cnt-progress-canvas" width=270 height=10></canvas>
                </td></tr>
                <tr>
                    <td class="info">统计信息截止到：2017-09-06 10:55 </td>
                </tr>
            </table>
        </div>
    
	    <div class="map-statistics-container">
	        <div class="sub-wrap">
                <div class="statistics">
                    <table>
                        <tr>
                            <td class="pie"><canvas id="pie-mileage" width="98" height="98"></canvas></td>
                            <td class="name">区域里程<span class="value">0</span><br><span class="total">总里程:&nbsp;<span class="num">0</span></span></td>
                        </tr>
                        <tr>
                            <td class="pie"><canvas id="pie-area" width="98" height="98"></canvas></td>
                            <td class="name">区域面积<span class="value">0</span><br><span class="total">总面积:&nbsp;<span class="num">0</span></span></td>
                        </tr>
                        <tr>
                            <td class="pie"><canvas id="pie-duration" width="98" height="98"></canvas></td>
                            <td class="name">区域时长<span class="value">0</span><br><span class="total">总时长:&nbsp;<span class="num">0</span></span></td>
                        </tr>
                        <tr>
                            <td class="pie"><canvas id="pie-flight-cnt" width="98" height="98"></canvas></td>
                            <td class="name">区域架次<span class="value">0</span><br><span class="total">总架次:&nbsp;<span class="num">0</span></span></td>
                        </tr>
                    </table>
                </div>

                <div class="map-wrap">
                    <div id="vector-map-container">
                        <div class="area">
                            <h3>当前显示</h3>
                            <p><!--内蒙古 广西 广东--></p>
                            <h3 class="clear button" onClick="zoneStatisticsM.mapRestore()">清除全部</h3>
                        </div>
                    </div>
                </div>
            </div>
	    </div>
	</div>
</main>
</body>

<script src="/js/jquery-3.2.1.min.js"></script>
<script src="/js/Ecalendar.jquery.min.js"></script>
<script src="/js/jquery.vector-map.js" type="text/javascript"></script>
<script src="/js/china-zh.js" type="text/javascript"></script>
<script src="/js/vendor/vector-map.js" type="text/javascript"></script>
<script src="/js/vendor/common.js"></script>
<script src="/js/vendor/chart-h.js"></script>
<script src="/js/vendor/zone-statistics.js"></script>

<script>
	// demo代码
	// 地图点击区域名
	zoneStatisticsM.mapZoneChangedCallback = function(checkedZoneNames) {
		console.log(checkedZoneNames);
	};

	// 更新过滤统计数据
	var filterData = {droneCnt: {total:500, filter:150},
		mileage: {total:2000, filter:2000},
		area: {total:3000, filter:1500},
		duration: {total:4000, filter:1200},
		flightCnt: {total:1000, filter:200}};
	zoneStatisticsM.filterStatistics.update(filterData);

	// 更新地图区域统计数据
	var zoneData = {mileage:{total: 3000, zone:1800},
		area:{total: 3600, zone: 2000},
		duration:{total: 2600, zone:55},
		flightCnt:{total: 1000, zone:18}};
	zoneStatisticsM.zoneStatistics.update(zoneData);

</script>

</html>






